<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { getImageUrl } from '../../utils/system'
import { ElMessage } from 'element-plus'
import { Star, StarFilled } from '@element-plus/icons-vue'
import useUserStore from '../../stores/userStore'

const route = useRoute()
const userStore = useUserStore()
const loading = ref(false)
const inheritorDetail = ref<any>({})

// 前端数据
// 所有传承人列表
const allInheritorList = [
  {
    id: 1,
    name: "钟连盛",
    level: "国家级",
    title: "工艺美术大师",
    region: "北京市",
    introduction: "中国工艺美术大师、北京市特级工艺美术大师、高级工艺美术师、国家级非物质文化遗产景泰蓝制作技艺代表性传承人。",
    avatar: "/images/inheritor1.jpg",
    createTime: "2023-01-15",
    description: "<p>钟连盛，1962年生于北京，满族，中国工艺美术大师、北京市特级工艺美术大师、高级工艺美术师、国家级非物质文化遗产景泰蓝制作技艺代表性传承人、享受国务院政府特殊津贴专家。</p><p>现任北京市珐琅厂有限责任公司总经理兼总工艺美术师，中国民主建国会·民建中央画院工艺美术专业委员会副主任、中国工艺美术协会·金属艺术专业委员会副主任委员兼秘书长、北京民间文艺家协会副主席。</p><p>钟连盛在景泰蓝制作技艺方面有着深深的造诣，他的作品既保持了景泰蓝的传统工艺特色，又融入了现代设计理念，形成了独特的艺术风格。其作品多次在国内外展览中获奖，并被多家博物馆收藏。</p>"
  },
  {
    id: 2,
    name: "姚建萍",
    level: "国家级",
    title: "苏绣艺术大师",
    region: "江苏省",
    introduction: "苏绣国家级代表性传承人，被誉为\"苏绣皇后\"，其作品精细雅致，具有很高的艺术价值。",
    avatar: "/images/inheritor2.jpg",
    createTime: "2023-02-20",
    description: "<p>姚建萍，女，苏州镇湖镇人，苏绣国家级代表性传承人，被誉为\"苏绣皇后\"。</p><p>姚建萍的家乡苏州镇湖镇是享誉中外的苏绣之乡，在这样的环境中成长，她很自然地走上了苏绣这条道路。她的作品精细雅致，将传统苏绣技艺与现代审美理念相结合，形成了独特的艺术风格。</p><p>其代表作品《仕女蹴鞠图》在2019年苏富比拍卖会上拍出1.2亿元高价，成为苏绣艺术品拍卖的新纪录。作品多次在国内外展览中获奖，被南京博物院、苏州博物馆等多家机构收藏。</p><p>现为苏州刺绣研究所高级工艺师，定期举办苏绣技艺培训班，培养新一代苏绣传承人。</p>"
  },
  {
    id: 3,
    name: "冯绍兴",
    level: "国家级",
    title: "陶瓷工艺师",
    region: "景德镇市",
    introduction: "第六批国家级非遗景德镇手工制瓷技艺代表传承人，专注于青花瓷制作，作品远销海外多个国家。",
    avatar: "/images/inheritor3.jpg",
    createTime: "2023-03-10",
    description: "<p>冯绍兴，字宁波，男，1965年出生，江西都昌人，景德镇著名陶艺师，第六批国家级非遗景德镇手工制瓷技艺代表传承人。</p><p>从事陶瓷制作30余年，专注于青花瓷的研究与创作。在继承传统青花瓷技艺的基础上，大胆创新，将现代设计理念融入传统工艺中。</p><p>其作品《山水人家》系列青花瓷在2022年中国陶瓷艺术博览会上荣获金奖，《梅兰竹菊》四君子茶具套装远销欧美、东南亚等20多个国家和地区。</p><p>现为景德镇陶瓷协会会员，景德镇青花瓷研究会理事，景德镇陶瓷职业技术学院客座教授。</p>"
  },
  {
    id: 4,
    name: "祁秀梅",
    level: "国家级",
    title: "剪纸艺术家",
    region: "陕西省",
    introduction: "庆阳民间剪纸艺术大师，陕北剪纸传承人，50年剪纸艺术生涯，作品展现浓郁的民俗文化特色。",
    avatar: "/images/inheritor4.jpg",
    createTime: "2023-04-05",
    description: "<p>祁秀梅，女，庆阳民间剪纸艺术大师，陕北剪纸代表性传承人。</p><p>1986年，祁秀梅应邀到中央美术学院讲学表演，神秘雄奇、大胆夸张、粗犷阳刚的庆阳剪纸一展千年文化魅力，走出沉寂乡野，闪耀在中国民族文化的浩瀚星空。</p><p>她的作品题材广泛，内容丰富，既有传统的吉祥图案，也有反映新时代生活的现代题材。代表作品《陕北风情》系列剪纸被中国美术馆收藏，《延安颂》在第五届中国民间艺术节上荣获金奖。</p><p>多次参加国内外文化交流活动，向世界展示陕北剪纸的独特魅力，为剪纸艺术的传承与发展做出了重要贡献。</p>"
  },
  {
    id: 5,
    name: "黄小明",
    level: "国家级",
    title: "木雕工艺师",
    region: "浙江省",
    introduction: "中国工艺美术大师、国家级非物质文化遗产\"东阳木雕\"代表性传承人，擅长传统建筑木雕，作品工艺精湛，细节丰富。",
    avatar: "/images/inheritor5.jpg",
    createTime: "2023-05-12",
    description: "<p>黄小明，男，中国工艺美术大师、国家级非物质文化遗产\"东阳木雕\"代表性传承人。</p><p>出身木雕世家，自幼学习木雕技艺。多年以来专注于传统建筑木雕的研究与创作，擅长人物、花鸟、山水等各类题材。</p><p>其代表作品《清明上河图》木雕长卷长18米，高1.2米，耗时五年完成，被誉为东阳木雕的经典之作。参与了多个古建筑修复项目，为传统建筑木雕技艺的传承做出了重要贡献。</p><p>现为东阳市木雕协会副会长，浙江省工艺美术大师，浙江理工大学艺术学院客座教授。</p>"
  },
  {
    id: 6,
    name: "王顺明",
    level: "国家级",
    title: "茶艺师",
    region: "福建省",
    introduction: "武夷岩茶(大红袍)制作技艺国家级非物质文化遗产代表性传承人，致力于传统制茶工艺的传承与推广。",
    avatar: "/images/inheritor6.jpg",
    createTime: "2023-06-18",
    description: "<p>王顺明，男，武夷岩茶(大红袍)制作技艺国家级非物质文化遗产代表性传承人。</p><p>出生于1954年，是武夷茶制作技艺的重要传承人之一。从事武夷岩茶传统制作工艺40余年，熟练掌握武夷岩茶采摘、萎凋、做青、炒青、揉捻、烘焙等全套制作工艺。</p><p>其制作的武夷岩茶多次在国内外茶叶评比中获奖，其中《大红袍》在2022年中国国际茶叶博览会上荣获金奖。致力于武夷岩茶文化的传播，定期举办茶艺培训班和茶文化讲座。</p><p>现为武夷山市茶叶协会理事，武夷山茶艺师协会会长，武夷学院茶学专业兼职讲师。</p>"
  }
]

// 获取当前用户信息
const currentUser = computed(() => {
  try {
    return typeof userStore.userInfo === 'string' ? JSON.parse(userStore.userInfo) : userStore.userInfo
  } catch {
    return {}
  }
})

// 获取传承人详情
const getInheritorDetail = () => {
  const id = route.query.id
  if (!id) {
    ElMessage.error('参数错误')
    return
  }
  
  loading.value = true
  try {
    // 使用前端数据查找传承人详情
    const inheritor = allInheritorList.find(item => item.id === Number(id))
    if (inheritor) {
      inheritorDetail.value = { ...inheritor }
      // 确保使用正确的图片路径
      inheritorDetail.value.avatar = `/images/inheritor${id}.jpg`
    } else {
      ElMessage.error('未找到传承人信息')
    }
  } catch (error) {
    ElMessage.error('获取详情失败')
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

onMounted(async () => {
  await getInheritorDetail()
})
</script>

<template>
  <div class="inheritor-detail-page">
    <!-- 返回按钮 -->
    <div class="back-section">
      <el-button @click="$router.back()" type="primary" plain size="small">
        ← 返回列表
      </el-button>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-text">加载中...</div>
    </div>
    
    <!-- 内容区域 -->
    <div v-else class="content-wrapper">
      <div class="detail-container">
        <!-- 头部区域 -->
        <div class="header-section">
          <!-- 左侧头像 -->
          <div class="avatar-section">
            <el-image
              :src="inheritorDetail.avatar"
              class="inheritor-avatar"
              fit="cover"
              loading="lazy"
            >
              <template #error>
                <div class="image-error">
                  <div class="error-icon">👤</div>
                </div>
              </template>
            </el-image>
          </div>
          
          <!-- 右侧信息 -->
          <div class="info-section">
            <h1 class="inheritor-name">{{ inheritorDetail.name }}</h1>
            
            <div class="meta-info">
              <div class="meta-item">
                <span class="label">级别：</span>
                <span class="level-tag">{{ inheritorDetail.level }}</span>
              </div>
              <div class="meta-item">
                <span class="label">称号：</span>
                <span>{{ inheritorDetail.title }}</span>
              </div>
              <div class="meta-item">
                <span class="label">地区：</span>
                <span>{{ inheritorDetail.region }}</span>
              </div>
              <div class="meta-item">
                <span class="label">发布时间：</span>
                <span>{{ formatDate(inheritorDetail.createTime) }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 详情区域 -->
        <div class="detail-section">
          <div class="section-title">详细介绍</div>
          <div class="detail-content" v-html="inheritorDetail.description"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.inheritor-detail-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px 0 40px;
}

.back-section {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 24px;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.detail-container {
  background: var(--bg-primary);
  border-radius: 20px;
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  
  // 头部区域
  .header-section {
    display: flex;
    gap: 30px;
    padding: 40px;
    border-bottom: 2px solid #f0f0f0;
    
    // 左侧头像
    .avatar-section {
      flex: 0 0 300px;
      
      .inheritor-avatar {
        width: 100%;
        height: 300px;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      .image-error {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 300px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-radius: 16px;
        
        .error-icon {
          font-size: 64px;
          color: #95a5a6;
        }
      }
    }
    
    // 右侧信息
    .info-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .inheritor-name {
        font-size: 32px;
        font-weight: bold;
        color: #2c3e50;
        margin: 0 0 24px 0;
        line-height: 1.4;
      }
      
      .meta-info {
        .meta-item {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          color: #666;
          font-size: 16px;
          
          .label {
            font-weight: 600;
            width: 80px;
            margin-right: 12px;
          }
          
          .level-tag {
            display: inline-block;
            padding: 6px 16px;
            background: var(--primary-color);
            color: white;
            font-size: 14px;
            border-radius: 20px;
          }
        }
      }
    }
  }
  
  // 详情区域
  .detail-section {
    padding: 40px;
    
    .section-title {
      font-size: 24px;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 2px solid #f0f0f0;
    }
    
    .detail-content {
      font-size: 16px;
      line-height: 1.8;
      color: #333;
      
      :deep(img) {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 16px 0;
      }
      
      :deep(p) {
        margin: 16px 0;
      }
      
      :deep(h1), :deep(h2), :deep(h3) {
        margin: 24px 0 16px;
        color: #2c3e50;
      }
    }
  }
}

// 加载状态
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  
  .loading-text {
    font-size: 18px;
    color: var(--text-secondary);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .detail-container {
    .header-section {
      flex-direction: column;
      padding: 24px;
      gap: 24px;
      
      .avatar-section {
        flex: 0 0 auto;
        
        .inheritor-avatar,
        .image-error {
          height: 240px;
        }
      }
      
      .info-section {
        .inheritor-name {
          font-size: 28px;
        }
      }
    }
    
    .detail-section {
      padding: 24px;
    }
  }
}

@media (max-width: 480px) {
  .back-section,
  .content-wrapper {
    padding: 0 16px;
  }
  
  .detail-container {
    .header-section {
      padding: 20px 16px;
      
      .avatar-section {
        .inheritor-avatar,
        .image-error {
          height: 200px;
        }
      }
      
      .info-section {
        .inheritor-name {
          font-size: 24px;
        }
        
        .meta-info {
          .meta-item {
            font-size: 14px;
            
            .label {
              width: 60px;
            }
          }
        }
      }
    }
    
    .detail-section {
      padding: 20px 16px;
      
      .section-title {
        font-size: 20px;
      }
    }
  }
}
</style>